<template>
  <view class="top">
    <view class="left">测评进度</view>
    <view class="center">
      <!-- 进度条 -->
      <!-- 最好使用组件 -->
      <progress
        :percent="baifenbi"
        duration="15"
        active-mode="forwards"
        border-radius="20"
        stroke-width="10"
        color="#0EA5E9"
        active="true"
      />
      <!-- <view class="progressBar"></view> -->
    </view>
    <view class="right">{{ finishNum + "/" + question_data.length }}</view>
  </view>
  <template v-if="question_data.length > 0">
    <view class="question">
      <view class="content">
        {{ question_data[finishNum - 1].topic }}
      </view>
    </view>
    <view class="answerList">
      <view class="topic">
        <view></view>
        <view class="title">单选题</view>
      </view>
      <view
        class="list"
        v-for="(item, index) in question_data[finishNum - 1].options"
        :key="index"
        hover-class="clickclass"
        hover-stay-time="300"
        @click="nextques(item.son_id)"
      >
        {{ item.title }}
      </view>
    </view>
  </template>
  <!-- 骨架屏 -->
  <skIndex v-if="skeLeton"></skIndex>
</template>

<script setup>
import { ref, reactive, onMounted, computed, watch } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import apiRequest from "~/api/index";
// 骨架屏
import skIndex from '~/Skeleton/SK-self-test.vue'
// 题目类型
let type = ref("");
//骨架屏
let skeLeton = ref(true)

// 计算进度条
let baifenbi = computed(() => {
  return (finishNum.value / question_data.value.length) * 100;
});
onLoad((e) => {
  type.value = e.type;
  // 页面标题栏
  uni.setNavigationBarTitle({ title: e.name });
});
// 因为要返回上一页所以最好使用onShow来处理
onShow(async () => {
  // 返回,重新初始化数据
  finishNum.value = 1;
  answerGroup.value = []
  let res = null
  if (type.value === "001") {
     res = await apiRequest.depressionTopics(); // 抑郁症
  } else if (type.value === "002") {
     res = await apiRequest.prematureTopics(); // 早泄
  } else if (type.value === "003") {
     res = await apiRequest.insomniaTopics(); // 失眠
  }
  question_data.value = res.data;
  // 骨架屏
  skeLeton.value = false
});
// 题目信息
const question_data = ref([]);
// 做到了第几题
const finishNum = ref(1);
// 选择的题目答案
const answerGroup = ref([]);
// 单击答案选项时
const nextques = (id) => {
  answerGroup.value.push(id);
  if (question_data.value.length > finishNum.value) {
    finishNum.value++;
  }
};
// 监视答案库的长度的变化
watch(
  () => answerGroup.value.length,
  () => {
    if (answerGroup.value.length == question_data.value.length) {
      // 转化成json形式方便读取
      let obj = JSON.stringify({
        type: type.value,
        answerGroup: answerGroup.value,
      });
      uni.navigateTo({
        url: `/pages/emotest/test-result?value=${obj}`,
      });
    } else {
      console.log(answerGroup.value);
    }
  }
);
</script>

<style>
page {
  background: linear-gradient(to bottom, #d6e8ff 30%, #f2f7fb 55%, #f0f5f9 90%);
}
.top {
  @apply flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
}
.top .left {
  margin-right: 40rpx;
}
.top .center {
  @apply flex-1 bg-gray-100;
  border-radius: 20rpx;
  height: 20rpx;
  overflow: hidden;
}
.top .right {
  margin-left: 40rpx;
}
.question,
.answerList {
  margin: 20rpx;
  padding: 20rpx;
  @apply bg-light-50;
  border-radius: 15rpx;
}
.answerList {
  background: #f3f8ff;
  box-shadow: #d6e8ff 0px 0px 23rpx 5rpx;
}
.topic {
  @apply flex;
  align-items: center;
}
.topic > view:first-child {
  width: 10rpx;
  height: 30rpx;
  @apply bg-blue-400;
  margin-right: 10rpx;
}

.answerList .list {
  padding: 40rpx 10rpx;
  @apply bg-light-50;
  margin: 20rpx 0;
}
.clickclass {
  @apply bg-blue-100 text-blue-300;
}
</style>
